<template>
    <div class="feedback container">
      <h2>反馈</h2>
      <p>暂时不开启
        <strong>评论</strong>
        以及
        <strong>留言</strong>
        功能，有什么
        <strong>建议</strong>
        或者
        <strong>需求</strong>
        or
        <strong>Bug</strong>，
        欢迎反馈给站长。
        <a-icon type="smile" style="font-size: 16px"/>
      </p>

      <a-form :form="form" @submit="handleSubmit">
        <a-form-item label="类型" >
          <a-select size="large"
                    placeholder="选择类型"
                    v-decorator="['type', {
                          rules: [{
                            type: 'number',
                            required: true,
                            message: '请选择一个类型...' }]
                           },]">
            <a-select-option :value="0">建议</a-select-option>
            <a-select-option :value="1">需求</a-select-option>
            <a-select-option :value="2">Bug</a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item label="邮箱 | 方便站长及时回馈" has-feedback>
          <a-input
            size="large"
            v-decorator="['email', { rules: [{
              min: 5,
              max: 40,
              type: 'email',
              required: true,
              whitespace: true,
              message: '请输入正确的邮箱地址(5-40)个字符'
            }] }]"
          />
        </a-form-item>
        <a-form-item label="建议 | 需求 | Bug" has-feedback>
          <a-textarea
            :rows="6"
            v-decorator="['content', { rules: [{
              min: 10,
              max: 300,
              required: true,
              message: '请输入您的建议 | 需求 | Bug (10-300)个字符' }]
            }]"
          />
        </a-form-item>
        <a-form-item style="text-align: center">
          <a-button type="primary"
                    html-type="submit"
                    size="large"
                    shape="round"
                    :loading="loading"
                    ghost>提交</a-button>
        </a-form-item>
      </a-form>
    </div>
</template>

<script>
  import app from "../../app"
  export default {
    name: "feedback",
    head: ()=>({ title: "反馈 - "+app.name }),
    beforeCreate() {
      this.form = this.$form.createForm(this, { name: "feedback"})
    },
    data:()=>({
      loading: false,
    }),
    methods: {
      handleSubmit(e){
        e.preventDefault();
        this.loading = true;
        this.form.validateFields((err, values) => {
          if (!err) {
            this.$axios.$post(`${app.api}/api/${app.apiVersion}/feedback/`, values)
              .then((resp)=>{
                if (resp.code === 200) {
                  this.loading = false;
                  this.$message.success(resp.msg)
                  this.form.resetFields();
                }else {
                  this.loading = false;
                  this.$message.warning(resp.msg)
                }
              }).catch((err)=>{
              this.loading = false;
              this.form.resetFields();
            })
          }else {
            this.loading = false;
          }
        })
      }
    }
  }
</script>

<style scoped>
  .feedback{
    margin-top: 120px;
    min-height: 80vh;
  }
  strong{
    color: red;
  }
  @media screen and (max-width: 1023px){
    .feedback{
      margin-top: 70px;
      margin-left: 20px;
      margin-right: 20px;
    }
  }
</style>
